<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>加载不带材质的obj模型 - iThreeJS</title>
		<style type="text/css">
			* {margin:0;padding:0;}
			html, body {overflow:hidden;}
			#container {position:relative;margin:30px auto;width:800px;height:480px;border:1px solid #ccc;}
			#loading {position:absolute;left:50%;top:50%;z-index:99;
				margin-left:-100px;margin-top:-100px;width:200px;height:200px;
				line-height:200px;text-align:center;font-size:18px;color:#333;}
			#loadingPercent {font-size:96px;}
		</style>
	</head>
	
	<body>
		<div id="container">
			<div id="loading"><span id="loadingPercent">0</span>%</div>
		</div>
		
		<script type="text/javascript" src="../../assets/js/three.min.js"></script>
		<script type="text/javascript" src="../../assets/js/controls/OrbitControls.js"></script>
		<script type="text/javascript" src="../../assets/js/loaders/OBJLoader.js"></script>
		<script type="text/javascript">
			//全局变量
			const w = 800;
			const h = 480;
			const r = w / h;
			const s = 330;
			
			//场景
			const scene = new THREE.Scene();
			//scene.background = new THREE.Color(0x666666);
			
			//光照
			//const aLight = new THREE.AmbientLight(0x404040, 1);
			//scene.add(aLight);
			const dLight = new THREE.DirectionalLight(0xffffff, 1);
			scene.add(dLight);
			
			//照相机
			const camera = new THREE.PerspectiveCamera(75, r, 1, 1000);
			//const camera = new THREE.OrthographicCamera(-s*r, s*r, s, -s, 1, 1000);
			camera.position.set(300, 200, 300);
			camera.lookAt(scene.position);
			
			//辅助对象
			//const axis = new THREE.AxesHelper(300);
			//scene.add(axis);
			//const cHelper = new THREE.CameraHelper(camera);
			//scene.add(cHelper);
			
			//渲染器
			const renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(w, h);
			renderer.setClearColor(0xffffff, 1);
			document.getElementById("container").appendChild(renderer.domElement);
			
			//控制器
			const ctrl = new THREE.OrbitControls(camera, renderer.domElement);
			
			//渲染函数
			function render() {
				//console.log("Render...");
				renderer.render(scene, camera);
				
				scene.rotation.y += 0.002;
				
				requestAnimationFrame(render);
			}
			
			//加载模型
			const loader = new THREE.OBJLoader();
			loader.load(
				"../../assets/models/obj/deer.obj",
				function(obj) {
					//console.log("Model: ", obj);
					obj.scale.set(0.33, 0.33, 0.33);
					obj.position.y = -250;
					scene.add(obj);
					render();
				},
				function(xhr) {
					//console.log("Loaded: ", (xhr.loaded / xhr.total * 100).toFixed(0), "%");
					
					let per = (xhr.loaded / xhr.total * 100).toFixed(0);
					if(per < 100) {
						document.getElementById("loadingPercent").innerHTML = per;
					}else {
						document.getElementById("loading").remove();
					}
				},
				function(err) {
					console.error("Error: ", err);
				}
			);
		</script>
	</body>
</html>